onstartmove Event

This event is fired after the mousedown on a splitter, which indicates the start of the dragging of the splitter.

Syntax

Inline HTML	<div cordysType="wcp.library.ui.Splitter" id="mySplitter" onstartmove="handler()"> ... </div >
Event property	mySplitter.onstartmove = handler

Event Information

To invoke	Mouse down on the splitter.
Default Action	Initiates any action associated with this event.

Event Object Properties

Although event handlers in the DHTML Object Model do not receive parameters directly, a handler can query an event object for data.

splitter	The splitter object.
returnValue	Boolean. If 'false', it cancels the dragging action and the splitter is not moved. Default value is 'true'.

Remarks

Static (non-dynamic) splitters cannot be dragged, and therefore do not fire this event.

Example

The following example shows the use of the splitter in an HTML page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
<title>Splitter onstartmove onstopmove</title>
<script src="/cordys/wcp/application.js"></script>
<style>
    .container
       {
        width:80%;
        height:80%;
        border:3px solid;
       }
    .top
       {
        background-color:blue;
       }
    .left
       {
        background-color:red;
       }
    .right
       {
        background-color:green;
       }
</style>
<script type="text/javascript">
    function handleOnstartmove()
     {
       var evnt = window.application.event;
       var split = evnt.splitter;
       //  evnt.returnValue = false;
       window.application.notify( split.id + " offset (start) " +  split.getOffset());
     }
    function handleOnstopmove()
     {
       var evnt = window.application.event;
       var split = evnt.splitter;
       //  evnt.returnValue = false;
      window.application.notify( split.id + " offset (stop) " +  split.getOffset() );
     }
</script>
</head>
<body>
<div class="container">
     <div class="top">
     </div>
     <div cordysType="wcp.library.ui.Splitter" offset="40%" id="splitter01" type="top" onstartmove="handleOnstartmove()" onstopmove="handleOnstopmove()">
     </div>
     <div class="bottom">
         <div class="left">
         </div>
         <div cordysType="wcp.library.ui.Splitter" offset="100" id="splitter02" type="left">
         </div>
         <div class="right"></div> 
      </div>
</div>
</body>
</html>